<template>
    <div class="box">
        <div class="box-left">
            <div v-for="(item, i) in leftList" :key="i">{{ item }}</div>
        </div>
        <div class="box-middle">
            <div v-for="(item, i) in middleList" :key="i">{{ item }}</div>

        </div>
        <div class="box-right">
            <div v-for="item in 15" :key="item">负一楼1号楼梯间</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'DevicePosition',
    data() {
        return {
            leftList: ['诉服大厅', '办公办案', '安防', '外围'],
            middleList: ['室外阔界', '地下负一层', '地下负二层', '地下负三层'],
        }
    }
}
</script>

<style lang="less" scoped>
.box {
    width: 100%;
    height: 100%;
    display: flex;
    background-size: 100% 100%;
    padding: 5px;

    .box-left {
        width: 300px;
        height: 100%;
        background: #082951;
        display: flex;
        flex-direction: column;
        align-items: center;

        div {
            width: 180px;
            height: 40px;
            border-radius: 5px 5px 5px 5px;
            background: #071e3b;
            margin: 20px 0 0;
            font-size: 16.73px;
            text-align: center;
            font-weight: 400;
            color: #FFFFFF;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .active {
            background: #234f5d;
        }
    }

    .box-middle {
        width: 300px;
        height: 100%;
        background: #071E3B;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 14px 0;

        div {
            width: 200px;
            height: 30px;
            border-radius: 5px 5px 5px 5px;
            background: #122d4f;
            margin: 10px 0 0;
            font-size: 14px;
            text-align: center;
            font-weight: 400;
            color: #FFFFFF;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .active {
            background: #234f5d;
        }
    }

    .box-right {
        flex: 1;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-content: flex-start;
        padding: 5px 20px;

        div {
            width: 200px;
            height: 30px;
            border-radius: 5px 5px 5px 5px;
            background: #0d3a7100;
            font-size: 12px;
            color: #FFFFFF;
            border: 1px solid #0D3A71;
            text-align: center;
            line-height: 28px;
            margin: 16px 0 0;
        }
    }
}
</style>